<template>
	<view class="order">
		<u-sticky bgColor="#fff" >
		    <u-tabs :list="tabs"
			:scrollable="false"
			:current='currentIndex'
			 lineWidth="30"
			        lineColor="#f56c6c"
			        :activeStyle="{
			            color: '#ff0000',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)',
			        }"
			        :inactiveStyle="{
			            color: '#090000',
			            transform: 'scale(1)'
			        }"
			        itemStyle="border-bottom: 1px solid #ddd; height: 40px; " @click="getOrder">
					</u-tabs>
		  </u-sticky>
	<scroll-view  scroll-y="true"  class="scroll-Y" >
		<view class="orders">
			<view class="orders-ul" v-for="item in list" :key="item.id">
				<view class="ul-header">
					<view class="span">
						{{item.deal}}
					</view>
				</view>
				<view class="orders-li" v-for="(index,i) in item.goodsList"  :key="i">
					<view class="li-image">
						<image :src="index.goodImg"></image>
					</view>
					<view class="li-detail">
						<view class="name">
							{{index.goodName}}
						</view>
						<view class="line">
							{{index.type}}
						</view>
						<view class="time" v-show="item.timeOut.trim() != ''">
							<text>支付倒计时&nbsp;{{item.timeOut}}</text>
						</view>
					</view>
					<view class="prcie">
						<view class="p">￥{{index.goodPrice}}</view>
						<view class="t">x{{index.count}}</view>
					</view>
				</view>
				<view class="sumPrice">
					<view class="text1">共{{sum(item.id,'sum')}}件商品&nbsp;合计:</view>
					<view class="text2">￥{{sum(item.id,'sumPrice')}}</view>
				</view>
				<view class="buttom">
					<view class="t2">
						<u-icon name="more-dot-fill"></u-icon>
					</view>
					<view>
						<u-button type="default" shape="circle" :plain="true">查看订单</u-button>
					</view>
					<view>
						<u-button type="default" shape="circle" :plain="true">买了换钱</u-button>
					</view>
					<view>
						<u-button type="default" color="#ead932" shape="circle" :plain="true">评价</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-empty :show="list == 0?true:false" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" >
		</u-empty>
	</scroll-view>
</view>
</template>

<script>
	import {apiOrders} from '../../api/mock'
	import {mapState,mapActions} from 'vuex'
	export default {
		data() {
			return {
				tabs:[
				{name:'全部', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
				{name:'待付款', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
				{name:'待发货', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
				{name:'待收货', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
				{name:'待评价', goods: null, num:1, y:0, curPageLen:0, hasNext:true}
				],
				currentIndex:0,
				list:[],
				timer:0,
			}
		},
		onLoad(e) {
			console.log(e);
			if(Object.keys(e).length != 0){
				this.getOrder(e);
			}
			this.getOrder({index:0});
		},
		computed:{
			...mapState('orders',['orderList']),
			sum(){
					return (id,val)=>{
					let obj =this.list.find(item => item.id == id);
					let sum = 0;
					let sumPrice = 0;
					obj.goodsList.forEach((item)=>{
						sum+=item.count;
						sumPrice+=item.count*item.goodPrice;
					})
					if(val == 'sum'){
						return sum;
					}
					return sumPrice;
				}
			}
		},
		methods: {
			...mapActions('orders',['delOrders']),
			 startTime(){
				this.list.forEach((item)=>{
					if(item.shopPay === "0"){
						let create = item.deliveryTime + 15*60*1000;
						let oldtime =create - new Date().getTime();
					  let timer = setInterval(()=>{
						  		let m = new Date(oldtime).getMinutes();
						  	    let s = new Date(oldtime).getSeconds();
										oldtime-=1000;
						  				m = m >=10?m:`0${m}`;
						  				s = s >=10?s:`0${s}`;
						  				if(oldtime <= 0){
						  					clearInterval(timer);
						  					uni.showToast({
						  						title:'订单已取消'
						  					})
						  				}else{
											item.timeOut = `00:${m}:${s}`;
										}
										
					  },1000)
					}	
				})
			},
			
			getOrder(e){
				this.list=[];
				this.currentIndex = e.index;
				let val = this.tabs[this.currentIndex].name;
				console.log(val);
				this.delOrders();
				apiOrders(val).then((res)=>{
					console.log(res);
					this.list=[...res];
					this.startTime();
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.order{
		background-color: #f2f2f2;
		.scroll-Y{
			height: 90vh;
			background-color: #eeeeee;
			.orders{
				padding: 10px;
				.orders-ul{
					background-color: white;
					padding: 10px;
					border-radius: 10px;
					margin-top: 10px;
					
					.ul-header{
						height: 30px;
						line-height: 30px;
						font-weight: bold;
						._h1{
							float: left;
							display: flex;
							height: 100%;
							width: 170px;
							justify-content: space-between;
						}
						.span{
							font-size: 15px;
							float: right;
							color: gold;
						}
					}
					.ul-header image{
						width: 15px;
						height:15px;
					}
					.orders-li{
						display: flex;
						font-size: 12px;
						margin-top: 10px;
						.li-detail{
							padding: 5px;
							overflow: hidden;
							.name{
								font-size: 15px;
								overflow: hidden;
								text-overflow: ellipsis;
								line-height: 20px;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								
							}
							.line{
								color: gray;
								margin-top: 5px;
							}
							.time{
								margin-top: 5px;
								color: #ead932;
							}
						}
						.prcie{
							text-align: right;
							width: 100px;
							height: 100%;
							.p{
								margin-top: 10px;
							}
							.t{
								color: gray;
							}
			
						}
					}
					.orders-li image{
						width: 90px;
						height: 90px;
						border-radius: 8px;
					}
					.sumPrice{
						height: 40px;
						line-height: 40px;
						display: flex;
						.text1{
							font-size: 12px;
							margin-left: 53%;
						}
					}
					.buttom{
						display: flex;
						padding: 5px;
						justify-content: space-between;
						.t2{
							height: 100%;
							margin-top: 10px;
						}
					}
					.buttom button{
						height: 30px;
						width: 80px;
						font-size: 13px;
						border: 1px solid gainsboro;
					}
				}
			}
		}
	}
</style>
